<template>
  <div id="swiper">
    <el-carousel type="" :interval="500000" autoplay="" height="750px" arrow="never">
      <el-carousel-item class="bannerImg" v-for="it in item" :style="{backgroundImage: 'url('+it.urlImgBanner+')'}" v-bind:key="it.id">
        <div class="contain">
          <div class="tit">{{it.titleBanner}}</div>
          <div class="txt">{{it.descriptionBanner}}
          </div>
          <a class="btn j_applyBtn" @click="joinIn">我要加盟</a>
        </div>
      </el-carousel-item>
    </el-carousel>
    <dp-Alert :share ="author" :rCodeKey ="rCodeKey" @menuopen="fooShare"></dp-Alert>
</div>
</template>

<script>
  import Alert from './Alert.vue'
  import global from './global'

  export default {
    data(){
      return{
        author:false,
        rCodeKey:'',
        item:'',
        note: {
          backgroundImage: "url(" + require("../assets/bannerSecond.png") + ")",
          backgroundRepeat: "no-repeat",
        },
      }
    },
    methods:{
      joinIn(){
        this.author = !this.author;
        this.rCodeKey = Math.random().toFixed(2)*800
      },
      fooShare(...data){
        this.author = data[0]
      }
    },
    mounted(){
      var url = global.apiGlobal + "contentBanner/fa/home";
      var data = {};
      this.$http.post(url,JSON.stringify(data)).then(function (data) {
        console.log(data)
        if(data.status == 200){
            this.item = data.body.content.rows;
        }
      }, function (response) {
        console.log(response)
      })
    },
    components:{
      'dp-Alert':Alert
    }
  }
</script>
<style scoped>
  #swiper{
    clear: both;
    width: 100%;
    min-width: 1200px;
  }

  .contain {
    zoom: 1;
    width: 1200px;
    position: relative;
    margin: auto;
  }

  .contain .tit {
    padding-top: 250px;
    padding-bottom: 7px;
    line-height: 56px;
    font-size: 36px;
    color: #fff;
    font-weight: 700;
  }
  .contain .txt {
    font-size: 14px;
    line-height: 30px;
    padding-bottom: 3px;
    color: #fff;
    width: 50%;
  }

  .contain .btn {
    top: 450px;
  }

  .contain .btn {
    display: block;
    margin: auto;
    position: absolute;
    width: 136px;
    line-height: 25px;
    height: 44px;
    text-align: center;
    border: 1px solid #fff;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    border-radius: 23px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
  }

  .contain .btn:hover {
    background-color: #fff;
  }

  .el-carousel__item.bannerImg {
    background-size: cover;
  }
</style>
